<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="./ico/iconfont.css">
		<script src="./jquery.min.js"></script>
		<script src="./d3.min.js"></script>
		<script src="https://d3js.org/d3-path.v1.min.js"></script>
		<script src="https://d3js.org/d3-shape.v1.min.js"></script>
		<style>
			body,ul{
				margin:0;
				padding:0;
			}
			.abs{
				position:absolute;
				width:200px;
				z-index:10000;
				background-color:rgba(227,244,255,.9);
				cursor:move!important;
			}
			.left {
				float:left;
				width:15%;
			}
			.left ul li{
				list-style-type:none;
				border:1px solid #289de9;
				border-radius: 15px;
				cursor:pointer;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden
			}
			.left ul li .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.left ul li .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.pDiv{
				float:left;
				width:83%;
				height:400px;
				border:5px solid rgb(255,0,0,0.1);
				overflow-y:scroll;
				position:relative;
				overflow-x:hidden;
			}
			.mydiv{
				width:100%;
				height:1200px;
				margin:0 auto;
				/*background-image:url('sqb33-handle.jpg');*/
			}


			.pane-node-content{

				border:1px solid #289de9;
				border-radius: 15px;
				cursor:move;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden;
				-webkit-transition: all .5s;
                -moz-transition: all .5s;
                -ms-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;

			}
			.pane-node-content:hover{
				background-color:rgba(227,244,255,.9);

			}
			.pane-node-content .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.pane-node-content .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.mycursor{
				cursor:crosshair;
			}
		</style>
	</head>
	<body>
	<div class='left'>
		<ul>
			<li>
			<span class="iconfont icon-dataBase"></span>
			 存储过程
			</li>
			<li>
			<span class="iconfont icon-SQLshujuji"></span>
			SQL脚本
			</li>
			<li>
			<span class="iconfont icon-icon-dian"></span>
			类型转换
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			 归一化
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			拆分
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			全表统计
			</li>
		</ul>
	</div>
	<div class="pDiv">
		<!--<svg  id="mydiv" class="mydiv" xmlns="http://www.w3.org/2000/svg" version="1.1">
		  <g class="pane-cell pane-node" transform="translate(40,40)">
			<foreignObject width="180" height="30">
				<body
					xmlns="http://www.w3.org/1999/xhtml">
					<div class="pane-node-content">
						<span class="iconfont icon-dataBase"></span>
						<span></span>
						<span class="name">写数据表-1</span>
						<span class="status icon-warning-o"></span>
					</div>
				</body>
			</foreignObject>
			<circle cx="90" cy="33" r="6" stroke="#999" stroke-width="1" fill="#fff" class="mycursor" onmouseover="changeColor1(evt)" onmouseout="changeColor2(evt)"/>
		  </g>
		  <g class="pane-cell pane-node" transform="translate(180,225)">
			<foreignObject width="180" height="30">
				<body
					xmlns="http://www.w3.org/1999/xhtml">
					<div class="pane-node-content">
						<span class="iconfont icon-dataBase"></span>
						<span></span>
						<span class="name">写数据表-1</span>
						<span class="status icon-warning-o"></span>
					</div>
				</body>
			</foreignObject>
			<circle cx="90" cy="33" r="6" stroke="#999" stroke-width="1" fill="#fff" class="mycursor" onmouseover="changeColor1(evt)" onmouseout="changeColor2(evt)"/>
		  </g>
		</svg>-->
	</div>
	<script>

			var startX, startY, diffX, diffY;
			var startL,startT;
			var currRectId = null;
			
			$(function(){
				
				startL = $('.pDiv').offset().left;
				startT = $('.pDiv').offset().top;
				// $('#mydiv').width($('#mydiv').parent().width());
				
				var disX = 100;
				var disY = 10;
				var li_id = 0;
				var anim_top = 0;
				var anim_left = 0;
				
				$('.left ul li').mousedown(function(ev) {
					anim_top = $(this).position().top;
					anim_left = $(this).position().left;
					
					$li = $(this.outerHTML);
					$li.addClass('abs');
					$li.css({'top':ev.pageY - disY,'left':ev.pageX - disX});
					$li.attr('id','li_' + ++li_id);
					$('.left ul').append($li);
					
					
					$(document).mousemove(function(ev) {
						$('#li_' + li_id).css('left', ev.pageX - disX);
						$('#li_' + li_id).css('top', ev.pageY - disY);
					});
					$(document).mouseup(function() {
						$('#li_' + li_id).animate({top:anim_top,left:anim_left},null,null,function(){
							$(this).remove();
						});

						$(document).off();
					});
					return false;
				});

			});

		var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
						 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
						 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];


		//线生成器
		var line = d3.line()
			.x(function(d) { return d.x; })
			.y(function(d) { return d.y; });

		var svgContainer = d3.select(".pDiv").append("svg")
                                    .attr("class", 'mydiv')
                                    .attr("width", '100%')
                                    .attr("height", '100%');
		//把path扔到容器中，并给d赋属性
		var lineGraph = svgContainer.append("path")
									.attr("d", line(lineData))
									.attr("stroke", "blue")
									.attr("stroke-width", 2)
									.attr("fill", "none");

		var div = svgContainer.append("g")
			.attr('transform',"translate(122,4)")
			.append("foreignObject")
			.attr('width',"180")
			.attr('height',"30")
			.append("body")
			.attr('xmlns',"http://www.w3.org/1999/xhtml")
			.append("div")
			.attr('class',"pane-node-content");
		div.append("span").attr('class','iconfont icon-dataBase');

		svgContainer.html(svgContainer.html())


		/*var g = svgContainer.append("g");
		g.attr('transform',"translate(120,4)")
			.attr('class',"pane-cell pane-node");
			var dd = d3.create('div')
			var div = dd.append("foreignObject")
			.attr('width',"180")
			.attr('height',"30")
			.append("body")
			.attr('xmlns',"http://www.w3.org/1999/xhtml")
			.append("div")
			.attr('class',"pane-node-content");

		div.append("span").attr('class','iconfont icon-dataBase');


		g.html(dd.html())*/

		</script>
	</body>
</html>